﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Home</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet"/>
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet"/>
    <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet"/>
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>


    <script src="assets/js/easypiechart.js"></script>
    <script src="assets/js/easypiechart-data.js"></script>


    <!-- Custom Js -->
    <!--<script src="assets/js/custom-scripts.js"></script>-->
    <script src="assets/js/echarts.min.js"></script>

    <!--日期插件-->
    <link href="assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <script src="assets/js/bootstrap-datetimepicker.min.js"></script>

</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><i class="fa fa-comments"></i> <strong>尚硅谷可视化平台</strong></a>
        </div>

        <ul class="nav navbar-top-links navbar-right">

        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div id="sideNav" href=""><i class="fa fa-caret-right"></i></div>
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <script></script>
                <li>
                    <a href="#"><i class="fa fa-dashboard"></i>系统统计<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a class="active-menu" href="index"><i class="fa fa-dashboard"></i>每日统计</a>
                        </li>
                        <li>
                            <a href="table"><i class="fa fa-table"></i>数据展示</a>
                        </li>
                        <li>
                            <a href="map"><i class="fa fa-edit"></i>地图展示</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="ui-elements.html"><i class="fa fa-desktop"></i>离线数据</a>
                </li>

            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">


            <!--<div class="row">
                <div class="col-md-12">

                    <ol class="breadcrumb">
                      <li>请选择入职日期<input  name="entryDate" placeholder="请选择入职日期" id="blrz-entry-date-start" type="text" ></li>
                    </ol>
                </div>
            </div>-->
            <!-- /. ROW  -->

            <div class="row">
                <ul id="total" class="um-page-tabs">

                    <!--<li class="um-page-tab" style="width: 50px; min-width: 162px;">
                        <div class="um-page-title">新增用户(今日)</div>
                        <div class="um-page-value">5</div>
                        <div class="um-page-rate"><span class="um-page-rate-name">昨日 </span><span
                                class="um-page-rate-value">0.0%</span><span class="um-page-rate-icon"><i class="iconfont"></i></span></div>
                    </li>
                    <li class="um-page-tab active-tab" style="width: 95px; min-width: 162px;">
                        <div class="um-page-title">启动次数(今日)</div>
                        <div class="um-page-value">2,702</div>
                        <div class="um-page-rate"><span class="um-page-rate-name">昨日 </span><span
                                class="um-page-rate-value">-2.33% </span><span class="um-page-rate-icon"><i
                                class="iconfont indicator-icon-down"></i></span></div>
                    </li>
                    <li class="um-page-tab" style="width: 76px; min-width: 162px;">
                        <div class="um-page-title">时段累计日活(今日)</div>
                        <div class="um-page-value">804</div>
                        <div class="um-page-rate"><span class="um-page-rate-name">昨日 </span><span
                                class="um-page-rate-value">+0.28% </span><span class="um-page-rate-icon"><i
                                class="iconfont indicator-icon-up"></i></span></div>
                    </li>
                    <li class="um-page-tab" style="width: 76px; min-width: 162px;">
                        <div class="um-page-title">分时活跃用户(今日)</div>
                        <div class="um-page-value">252</div>
                        <div class="um-page-rate"><span class="um-page-rate-name">昨日 </span><span
                                class="um-page-rate-value">+1.49% </span><span class="um-page-rate-icon"><i
                                class="iconfont indicator-icon-up"></i></span></div>
                    </li>-->
                </ul>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div id="main" style="width: 1100px;height:400px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<script type="text/javascript">

    /*$("#blrz-entry-date-start").datetimepicker({//选择年月日
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,//显示‘今日’按钮
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

        clearBtn:true,//清除按钮

        forceParse: 0
    });

    $("#blrz-entry-date-start").on('change',function(){
        var thisEntryDate = $("#blrz-entry-date-start").val();

    });*/

    //var tag = "l1";
    var tag = "";
    var idList = [];

    loadTotal();
    showAnalysis(tag);
    setInterval(function () {
        //alert(tag)
        loadTotal()
        showAnalysis(tag)
    }, 5000)


    function loadTotal() {
        $.ajax({
            type: "get",
            async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "getTotal",    //请求发送到TestServlet处
            data: {},
            dataType: "text",        //返回数据形式为json
            success: function (data) {
                $('#total').empty();   //清空resText里面的所有内容
                var html = '';
                console.log(data);
                var obj = eval('(' + data + ')');
                //初始化加载
                if (tag == "") {
                    tag = obj[0].id;
                    for (var i = 0; i < obj.length; i++) {
                        idList.push(obj[i].id);
                    }
                }
                $.each(obj, function (commentIndex, comment) {
                    if (tag == comment['id']) {
                        //alert(11);
                        html += '<li class="um-page-tab active-tab" id=' + comment['id'] + ' style="width: 50px; min-width: 162px;" onclick="loadData(this)">'
                            + '<div class="um-page-title">' + comment['name'] + '</div>'
                            + '<div class="um-page-value">' + comment['value'] + '</div>'
                            + '<div class="um-page-rate"><span class="um-page-rate-name">  </span>'
                            + '<span class="um-page-rate-value"></span><span class="um-page-rate-icon"><i class="iconfont"></i></span></div></li>'

                    } else {
                        html += '<li class="um-page-tab" id=' + comment['id'] + ' style="width: 50px; min-width: 162px;" onclick="loadData(this)">'
                            + '<div class="um-page-title">' + comment['name'] + '</div>'
                            + '<div class="um-page-value">' + comment['value'] + '</div>'
                            + '<div class="um-page-rate"><span class="um-page-rate-name"> </span>'
                            + '<span class="um-page-rate-value"></span><span class="um-page-rate-icon"><i class="iconfont"></i></span></div></li>'

                    }
                });
                $('#total').html(html);
            }
        });
    }

    function loadData(data) {
        var list = [];
        for (var i = 0; i < idList.length; i++) {
            list.push(idList[i]);
        }
        for (var i = 0; i < list.length; i++) {
            $("#" + list[i]).removeClass("active-tab")
        }
        var index = list.indexOf(data.id);
        if (index <= -1) {
            alert("数据加载失败")
        }
        list.splice(index, 1)
        //alert(list)
        for (var i = 0; i < list.length; i++) {
            $("#" + list[i]).removeClass("active-tab")
        }
        $("#" + data.id).addClass("active-tab")
        tag = data.id;
        showAnalysis(data.id)
        //alert(data.id)
        /*if(data.id=="l0"){
            //alert("11")
            $("#l1").removeClass("active-tab")
            $("#l2").removeClass("active-tab")
            $("#l0").addClass("active-tab")
            tag = "l0"
            showAnalysis(data.id)
        }else if(data.id=="l1"){
            $("#l2").removeClass("active-tab")
            $("#l0").removeClass("active-tab")
            $("#l1").addClass("active-tab")
            tag = "l1"
            showAnalysis(data.id)
        }else if(data.id=="l2"){
            $("#l1").removeClass("active-tab")
            $("#l0").removeClass("active-tab")
            $("#l2").addClass("active-tab")
            tag = "l2"
            showAnalysis(data.id)
        }*/
    }


    function showAnalysis(data) {
        var myChart = echarts.init(document.getElementById('main'));
        var xdata = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        // 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '每日统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                //data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                data: ['昨天', '今天']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '昨天',
                    type: 'line'
                },
                {
                    name: '今天',
                    type: 'line'
                }
            ]
        });

        myChart.showLoading();

        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var ynums = [];    //总量数组（实际用来盛放Y坐标值）
        var tnums = [];

        $.ajax({
            type: "get",
            async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "getAnalysisData?tag=" + data,    //请求发送到TestServlet处
            data: {},
            dataType: "text",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                //alert(result)
                var obj = eval('(' + result + ')');
                console.log(obj);
                //alert(obj.yestoday)
                var ydata = obj.yesterday;
                var tdata = obj.today;
                if (ydata && tdata) {
                    console.log(ydata)
                    console.log(tdata)
                    for (var i = 0; i < xdata.length; i++) {
                        if (tdata[xdata[i]]) {
                            tnums.push(tdata[xdata[i]])
                        } else {
                            tnums.push(0)
                        }
                        if (ydata[xdata[i]]) {
                            ynums.push(ydata[xdata[i]])
                        } else {
                            ynums.push(0)
                        }
                    }

                    //names = ydata.keys()
                    //ynums = ydata.values()
                    //tnums = tdata,values()
                    /*for(var i=0;i<ydata.length;i++){
                        names.push(ydata[i].time);    //挨个取出类别并填入类别数组
                        //alert(ydata[i].datetime)
                    }
                    for(var i=0;i<ydata.length;i++){
                        ynums.push(ydata[i].num);    //挨个取出销量并填入销量数组
                    }
                    for(var i=0;i<tdata.length;i++){
                        tnums.push(tdata[i].num);    //挨个取出销量并填入销量数组
                    }*/
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        /*xAxis: {
                            data: names
                        },*/
                        series: [{
                            name: '昨天',
                            type: 'line',
                            data: ynums
                        },
                            {
                                name: '今天',
                                type: 'line',
                                data: tnums
                            }]
                    });

                }

            },
            error: function () {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    }
</script>

</body>

</html>